<template>
  <div class="container">
    <router-view></router-view>
    <div class="index">
      <Header />
      <div class="msglist">
        <div class="tit">
          系统消息 <div class="go-back" @click="goBack()" >返回</div>
        </div>

        <div class="main-conn">
          <table cellspacing=0 v-if="listData.length>0">
            <tr>
              <th width="20%" align="left" class="ml100">标题</th>
              <th  width="50%">内容</th>
              <th>时间</th>
              <th>操作</th>
            </tr>
            <template v-for="(item, i) in listData">
            <tr  >
              <td class="ml100">{{ item.title }}</td>
              <td>{{ item.content.substr(0,30) }}...</td>
              <td>{{ item.addtime }}</td>
              <td><span class="see" @click="openDetail(item)" >查看</span></td>
            </tr>
            </template>
          </table>
        <el-empty description="暂无消息" v-else></el-empty>

        <div class="page-area mr-20">
          <span type="button" class="btn-home fl" style="cursor: pointer;" @click="getCatList(categoryId, current, 1)">首页</span>
          <el-pagination
            background
            layout="  prev, pager, next "
            :current-page="currentPage"
            :total="total"
            :page-size="1"
            @current-change="handleCurrentChange"
          ></el-pagination>
          <span type="button" style="cursor: pointer;" class="btn-last fr" @click="getCatList(categoryId, current, total)">尾页</span>
        </div>
    </div>
      </div>
  </div>


    <div class="commDig msg-area"  v-if="isOpen == true" >
      <div class="title">
        <span>{{currentInfo.title}}</span>
        <span class="closed" @click="isOpen = false"><img src="static/img/close.png" /></span>
      </div>
      <div class="cont"> <p>{{currentInfo.content}}</p></div>

      <div class="mt10 baseAct" >
        <button style="margin-left: 160px;  margin-right: 6px;"  @click="isOpen = false" class="sure">确定</button>
        <label class="time"> {{ currentInfo.addtime | formatDate }}</label>
      </div>
    </div>

  </div>
</template>

<script>
import Header from '../components/header.vue';
export default {
  data() {
    return {
      isOpen:false,
      listData:[],
      current: -1,
      currentInfo: {},
      categoryId: '',
      currentPage: 1,
      total:0,
      page:1,
      page_size:10
    };
  },
  created() {
    this.token = localStorage.getItem('token');
    this.getAll();
  },
  methods: {
    getAll() {
      this.isOpen = false;
      this.current = -1;
      this.categoryId = '';
      let all_form = {
        token: this.token,
        page: this.page,
        limit: this.page_size
      };
      //全部
      this.$api('message.index', all_form).then(res => {
        this.listData = res.data.data;
        this.total = res.data.last_page;
      });
    },
    getCatList(id, index, page = 1 ) {
      if (page == 1) {
        this.currentPage = 1;
      } else if (page == this.total) {
        this.currentPage = this.total;
      }
      this.page = page;
      let all_form = {
        token: this.token,
        page: this.page,
        limit: this.page_size,
        cid: this.categoryId,
        payuswitch: this.payuswitch,
        sort: this.sort,
        keyword: this.input
      };
      //分类课程
      this.$api('message.index', all_form).then(res => {
        this.listData = res.data.data;
        this.total = res.data.last_page;
      });
    },
    handleCurrentChange(e) {
      console.log(e);
      this.currentPage = e;
      this.getCatList(this.categoryId, this.current, e );
    },
    prepareLessons(){
      this.$router.push("/prepareLessons");
    },
    goBack(){
      this.$router.go(-1);
    },
    openDetail(item){
      //this.currentInfo = item;
      this.$api('message.show', {id:item.id}).then(res => {
        this.currentInfo = res.data;
      });
      this.isOpen = true;
    }
  },
filters: {
  formatDate: function (value) {
    let date = new Date(value*1000);
    let y = date.getFullYear();
    let MM = date.getMonth() + 1;
    MM = MM < 10 ? ('0' + MM) : MM;
    let d = date.getDate();
    d = d < 10 ? ('0' + d) : d;
    let h = date.getHours();
    h = h < 10 ? ('0' + h) : h;
    let m = date.getMinutes();
    m = m < 10 ? ('0' + m) : m;
    let s = date.getSeconds();
    s = s < 10 ? ('0' + s) : s;
    return y + '年' + MM + '月' + d + '日 ' + h + ':' + m + ':' + s;
  }
},
  components:{Header}
};
</script>

<style lang="scss" scoped>

</style>
